<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理系统后台</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3329812_0c4eyrkhvl65.css">
    <!-- 引入jquery -->
    <script type="text/javascript" src="//code.jquery.com/jquery-1.8.2.min.js"></script>
    <link rel="stylesheet" href="./css/background/homepage.css">
    <script src="./js/background/homepage.js"></script>
</head>

<body>
    <!-- 左边的大导航栏 -->
    <div class="feature">
        <p>图书管理后台</p>
        <!-- 管理员信息 -->
        <div class="administrator">
            <div class="avatar">
                <img src="./imgs/imgs10.jpeg">
                <div class="administrator-detail">
                    <a href="#">超级管理员</a>
                    <a href="#"><i class="iconfont icon-yuandian common"></i>在线</a>
                </div>
            </div>
        </div>



        <!-- 导航栏-功能 -->
        <div class="menu-list">
            <ul>
                <li class="first-menu"><a href="javascript:;"><i class="iconfont icon-zhuye common"></i>主页</a></li>
                <li class="first-menu"><a href="javascript:;" class="displays"><i
                            class="iconfont icon-xitong common"></i>系统管理
                        <i class="iconfont icon-jiantouxia"></i></a>
                    <ul class="display-ul">
                        <li class="second-menu"><a th:href="@{/systemctrol}">图书管理</a></li>
                    </ul>
                </li>

                <li class="first-menu"><a href="javascript:;" class="displays1"><i
                            class="iconfont icon-jiaose common"></i>角色管理
                        <i class="iconfont icon-jiantouxia"></i></a>
                    <ul class="display-ul1">
                        <li class="second-menu"><a th:href="@{/userInformation}">用户信息</a></li>
                        <li class="second-menu"><a th:href="@{/history}">用户还书借书</a></li>
                    </ul>
                </li>

            </ul>
        </div>
    </div>

    <!-- 退出登录-弹框遮盖层 -->
    <div class="container-log">
        <!-- 弹出框 -->
        <div class="leave">
            <p>是否退出登录？</p>
            <button class="dump-common certain">确定</button>
            <button class="dump-common cancel">取消</button>
        </div>
    </div>

    <!-- 右边内容 -->
    <div class="right-nav">
        <!-- 顶部导航信息 -->
        <div class="information">
            <a href="#" class="information-user">超级用户<i class="iconfont icon-jiantouxia"></i>
                <ul class="list">
                    <li class="out">退出登录</li>
                </ul>
            </a>
            <a href="#"><i class="iconfont icon-shezhi1"></i></a>
        </div>

        <!-- 中间部分 -->
        <div class="center">
            <h3>欢迎进入图书管理系统后台!</h3>
        </div>
    </div>
    <script>
        // 导航栏
        $(".menu-list .first-menu").click(function () {
            $(this).addClass("active").siblings().removeClass("active");
            $(this).find("ul").slideToggle(500);
            $(this).siblings().find("ul").hide();
        })
        $(".menu-list .second-menu").click(function () {
            var $this = $(this);
            $(".second-menu").each(function () {
                if ($(this).hasClass("current")) {
                    $(this).removeClass("current");
                }
            })
            $this.addClass("current").siblings().removeClass("current");
        })
        //  阻止事件冒泡
        $(".menu-list .first-menu ul").bind("click", function (event) {
            event.stopPropagation();
        });

    </script>
</body>

</html>